<!--
 * @Author: your name
 * @Date: 2021-06-16 17:09:15
 * @LastEditTime: 2021-06-16 17:43:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vueDemo\013-layout响应式布局(参照Bootstrap).html

    响应式布局：页面设计可以满足不同客户端的兼容 

-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础布局</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/element-ui/lib/theme-chalk/display.css"></script>
    <style>
        .el-row {
            margin: 20px;
        }
        
        .el-col {
            border-radius: 4px;
        }
        
        .bg-purple-dark {
            background: #99a9bf;
        }
        
        .bg-purple {
            background: #d3dce6;
        }
        
        .bg-purple-light {
            background: #e5e9f2;
        }
        
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
    </style>
</head>

<body>
    <class class="div">
        <el-row :gutter="20">
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
                <div class="grid-content bg-purple-light" hidden-sm-and-down></div>
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
        <!-- 相应式布局:效果————宽屏页面时内容仅仅占页面宽度50%居中显示，窄屏幕时占70%，手机时占100% -->
        <el-row :gutter="20">
            <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:4}" :md="{span:12,offset:6}">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
</body>
<script>
    new Vue({
        el: ".div"
    })
</script>

</html>